import React from 'react';
import { Tabs, Card, Form, Select, Input, Row, Col } from 'antd';
import { InfoCircleOutlined, ClockCircleOutlined, CheckCircleOutlined, SendOutlined } from '@ant-design/icons';
import SKUTable from './SKUTable';

const { TabPane } = Tabs;

const FormItem = ({ label, required, children, tooltip }) => (
  <Form.Item
    label={
      <span>
        {required && <span style={{ color: '#ff4d4f', marginRight: 4 }}>*</span>}
        {label}
        {tooltip && <InfoCircleOutlined style={{ marginLeft: 4, color: '#999' }} />}
      </span>
    }
    style={{ marginBottom: 16 }}
  >
    {children}
  </Form.Item>
);

const SPUInfo = () => {
  return (
    <Card
      title={
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ 
            width: 4, 
            height: 14, 
            backgroundColor: '#1890ff', 
            marginRight: 8 
          }} />
          <span>SPU信息</span>
        </div>
      }
      style={{ marginBottom: 16 }}
    >
      <Form layout="vertical">
        <Row gutter={16}>
          <Col span={6}>
            <FormItem label="所属事业部" required tooltip>
              <Select placeholder="请选择">
                <Select.Option value="1">耐用品产品事业部/电器</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="商标" tooltip>
              <Select placeholder="请选择">
                <Select.Option value="1">bckid</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="适用性别" required tooltip>
              <Select placeholder="请选择">
                <Select.Option value="male">男性</Select.Option>
                <Select.Option value="female">女性</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="适用季节" required tooltip>
              <Select placeholder="请选择">
                <Select.Option value="spring">春季</Select.Option>
                <Select.Option value="summer">夏季</Select.Option>
                <Select.Option value="autumn">秋季</Select.Option>
                <Select.Option value="winter">冬季</Select.Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={6}>
            <FormItem label="产品等级" required tooltip>
              <Select placeholder="请选择">
                <Select.Option value="splus">S+</Select.Option>
                <Select.Option value="s">S</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="产品系列" tooltip>
              <Select placeholder="请选择">
                <Select.Option value="foldable">折叠</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="价格定位" required tooltip>
              <Select placeholder="请选择">
                <Select.Option value="9">9系</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={6}>
            <FormItem label="上市年份" tooltip>
              <Input placeholder="请输入4位年份，例如2024" maxLength={4} />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
  );
};

const CategoryView = () => {
  return (
    <div>
      <SPUInfo />
      <SKUTable />
    </div>
  );
};

const DevelopmentView = () => {
  return <div>研发视图内容</div>;
};

const FinanceView = () => {
  return <div>财务视图内容</div>;
};

const TodoTabs = () => {
  return (
    <Tabs defaultActiveKey="todo">
      <TabPane 
        tab={
          <span>
            <ClockCircleOutlined />
            <span style={{ marginLeft: 8 }}>品类视图</span>
          </span>
        } 
        key="todo"
      >
        <CategoryView />
      </TabPane>
      <TabPane 
        tab={
          <span>
            <CheckCircleOutlined />
            <span style={{ marginLeft: 8 }}>研发视图</span>
          </span>
        } 
        key="done"
      >
        <DevelopmentView />
      </TabPane>
      <TabPane 
        tab={
          <span>
            <SendOutlined />
            <span style={{ marginLeft: 8 }}>财务视图</span>
          </span>
        } 
        key="my"
      >
        <FinanceView />
      </TabPane>
    </Tabs>
  );
};

export default TodoTabs;
